<template>
  <view class="chart">
    <view class="charts-box">
      <qiun-data-charts type="line" :opts="line" :chartData="chartLine" />
      <slot></slot>
      <qiun-data-charts type="pie" :opts="opts" :chartData="chartPie" />
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      chartLine: {
        type: Object
      },
      chartPie: {
        type: Object,
        default () {
          return {
            series: [{
              data: [{
                "name": "购物",
                "value": 50
              }, {
                "name": "餐饮",
                "value": 30
              }, {
                "name": "零食",
                "value": 20
              }, {
                "name": "旅行",
                "value": 18,
              }, {
                "name": "水果",
                "value": 8
              }]
            }]
          }
        }
      },
    },
    data() {
      return {
        line:{
          color: ["#1890FF"],
          padding: [15, 10, 0, 15],
          legend: {},
          xAxis: {
            disableGrid: true,
            // calibration:true
            labelCount: 13, //默认显示个数
            itemCount:this.chartLine.length  //x轴数据的长度
          },
          yAxis: {
            data: [{
              min: 0
            }],
            disabled: true,
          },
          extra: {
            line: {
              type: "straight",
              width: 2
            }
          }
        },
        opts: {
          color: ["#1890FF"],
          padding: [15, 10, 0, 15],
          legend: {},
          xAxis: {
            disableGrid: true,
            // calibration:true
          },
          yAxis: {
            data: [{
              min: 0
            }],
            disabled: true,
          },
          extra: {
            line: {
              type: "straight",
              width: 2
            }
          }
        }
      };
    },
    mounted() {},
    methods: {
      getLineData(data, lastData) {
        let res = {
          categories: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"],
          series: [{
              name: "本周",
              data
            },
            {
              name: "上周",
              data: lastData
            }
          ]
        };
        this.chartLine = JSON.parse(JSON.stringify(res));
      },
      getPieData() {
        setTimeout(() => {
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
          let res = {
            series: [{
              data: [{
                "name": "购物",
                "value": 50
              }, {
                "name": "餐饮",
                "value": 30
              }, {
                "name": "零食",
                "value": 20
              }, {
                "name": "旅行",
                "value": 18,
              }, {
                "name": "水果",
                "value": 8
              }]
            }]
          };
          this.chartPie = JSON.parse(JSON.stringify(res));
        }, 500);
      }
    },
    watch: {
      /* data: {
        handler(v, l) {
          this.getLineData(this.data.expends, this.lastdata.expends)
        },
        deep: true
      },
      code(v, l) {
        // console.log(v);
        if (v == 0) {
          this.getLineData(this.data.expends, this.lastdata.expends)
        } else if (v == 1) {
          // console.log(this.data, this.lastdata);
          this.getLineData(this.data.incomes, this.lastdata.incomes)
        }
      } */
    }
  };
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    padding: 50px 20px;
    width: 100%;
    height: 300px;
  }
</style>
